<template>
    <div id="mytest">
        <div id="frame">
            <!-- 实例1: -->
            <h1>MathJax v3: TeX &amp; MathML to HTML</h1>
            <div></div>
            <el-input type="textarea" v-model="val" :autosize="{minRows: 6, maxRows: 12}" @input="convert"></el-input>
            <br />
            <div class="right">
                <el-button @click="convert">转换</el-button>
            </div>
            <br clear="all" />
            <div id="output" v-html="str"></div>
        </div>
    </div>
</template>

<script setup>
import { reactive,toRefs,onMounted,ref,watch,nextTick } from 'vue'

const val = ref("$${\\partial u \\over \\partial t} = k * ({\\partial^2 u \\over \\partial x^2}+{\\partial^2 u \\over \\partial y^2}+{\\partial^2 u \\over \\partial z^2})$$");
const str = ref("$$ {\\partial u \\over \\partial t} = k * ({\\partial^2 u \\over \\partial x^2}+{\\partial^2 u \\over \\partial y^2}+{\\partial^2 u \\over \\partial z^2})$$");

function convert() {
    str.value = `${val.value}` 
    nextTick(() => {
        MathJax.texReset();
        MathJax.typesetClear();
        MathJax.typesetPromise().catch(err => {
            str.value = err.message
        });
    });
}

onMounted(() => {
    nextTick(() => {
        MathJax.texReset();
        MathJax.typesetClear();
        MathJax.typesetPromise().catch(err => {
            str.value = err.message
        });
    });
});
</script>

<style scoped>
#frame {
    max-width: 40em;
    margin: auto;
}

#input {
    border: 1px solid grey;
    margin: 0 0 0.25em;
    width: 100%;
    box-sizing: border-box;
}

#output {
    margin-top: 0.75em;
    border: 1px solid grey;
    padding: 0.25em;
    min-height: 2em;
}

#output>pre {
    margin-left: 5px;
}

.right {
    float: right;
}
</style>